<template>
  <div>
    <SellCard>
      <div slot="main" class="header">
        <Homecard
          v-for="v in arr"
          :key="v.id"
          :title="v.title"
          :price="1122331"
          :icon="v.icon"
          :iconColor="v.iconColor"
        ></Homecard>
      </div>
      <div class="box" ref="echartsbox"></div>
    </SellCard>
  </div>
</template>

<script>
import SellCard from "@/components/SellCard";
import Homecard from "@/components/Homecard";
import { totaldataApi } from "@/api/home";

// console.log(echarts);
export default {
  components: {
    SellCard,
    Homecard,
  },
  created() {
    this.getData();
  },

  data() {
    return {
      arr: [
        {
          id: 1,
          title: "总订单",

          icon: "icon-order1",
          iconColor: "#00f2fe",
        },
        {
          id: 2,
          title: "总销售额",

          icon: "icon-money",
          iconColor: "#f9748f",
        },
        {
          id: 3,
          title: "今日订单",
          icon: "icon-order2",
          iconColor: "#96e6a1",
        },
        {
          id: 4,
          title: "今日销售额",

          icon: "icon-pay",
          iconColor: "#f6d365",
        },
      ],

      homeMain: {
        xData:[],
        // orderData:[],
        // amountData:[]
      },
    };
  },

  mounted() {
    this.echartsData(this.homeMain.xData);
  },

  methods: {
    getData() {
      totaldataApi().then((res) => {
        console.log(res.data.xData);
        this.homeMain.xData = res.data.xData;
        // console.log(this.homeMain);
      });
    },
    echartsData(v) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(this.$refs["echartsbox"]);

      let option = {
        title: {
          text: "数据统计",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["订单", "销售额", "注册人数", "管理员人数"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          // data: v.xData,
          data: [1,2,3,4,5,6,7],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "订单",
            type: "line",
            stack: "Total",
            data: [1,2,3,4,5,6,7],
          },
          {
            name: "销售额",
            type: "line",
            stack: "Total",
            data: [1,2,3,4,5,6,7],
          },
          {
            name: "注册人数",
            type: "line",
            stack: "Total",
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "管理员人数",
            type: "line",
            stack: "Total",
            data: [320, 332, 301, 334, 390, 330, 320],
          },
        ],
      };
      // 绘制图表
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  margin: 20px 0px;
  display: flex;
  justify-content: space-between;
}
.box {
  background-color: #fff;
  height: 500px;
  // width: 100%;
}
</style>